<body>
    <h2>医院项目</h2>

    <div style="margin:10px 0;"></div>
    <table id="list"></table>
    <div id="dlg" class="easyui-dialog" style="width:500px;height:400px;padding:10px 20px"
            closed="true" buttons="#dlg-buttons">
        <div class="ftitle">添加项目</div>
        <form id="fm" method="post" novalidate>
        	<input name="id" type="hidden">
            <div class="fitem">
                <label>名称:</label>
                <input name="name" class="easyui-validatebox" required="true">
            </div>
            <div class="fitem">
                <label>价格:</label>
                <input name="priceValue" type="text" class="easyui-numberbox" value="100" data-options="min:0,precision:2">
            </div>
            <div class="fitem">
                <label>描述:</label>
                <textarea name="description" style="height:60px;width:70%;float:left"></textarea>
            </div>
        </form>
    </div>
    <div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="itemsListJs.save()">保存</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a>
    </div>
	<div id="itemView" closed="true" title="项目详细信息"  class="easyui-dialog"  style="width:800px;height:500px;padding:10px 20px;">
	
        	<div class="ftitle">医院项目信息</div>
        	<div class="cdetail">
        		<div class="fitem">
            		<span class="view">名称 : <span id="view_name"></span></span>
            		<span class="view">当前价格 : <span id="view_price"></span></span>
            		<span class="view">添加人 : <span id="view_addUser"></span></span>
            	</div>
            	<div class="fitem">
            		<span class="view">最近修改人: <span id="view_editUser"></span></span>
            		<span class="view">描述 : <span id="view_desc"></span></span>
            	</div>
        	</div>
        	<div id="container" style="width:600px; height: 300px; margin: 0 auto"></div>
	</div>
	
    <script type="text/javascript">
 
(function(itemsListJs, $, undefined ) { 
	$('#list').datagrid({
		title:'医院项目',
		iconCls:'icon-save',
		height:400,
		fitColumns:true,
		singleSelect:true,
		url:null,
		frozenColumns:[[    
	                    {title:'ID',field:'id',width:80,sortable:true}  
	                ]],  
	    columns:[[
	             	{title:'名称',field:'name',width:80},
	             	{title:'价格',field:'priceValue',width:30,sortable:true},
	             	{title:'添加人',field:'addUser',width:30,sortable:true},
	             	{title:'修改人',field:'lastEditUser',width:30,sortable:true},
	             	{title:'描述',field:'description',width:150}
	             ]],
		pagination:false,
		toolbar:[{  
            id:'btnadd',  
            text:'添加',  
            iconCls:'icon-add',  
            handler:newItem
        },{  
            id:'btnupdate',  
            text:'修改',  
            iconCls:'icon-edit',  
            handler:edit
        },'-',{  
            id:'btndelete',  
            text:'删除',   
            iconCls:'icon-remove',
            handler:destroy
        },{
        	id:'btnrefresh',
        	text:'刷新',
        	iconCls:'icon-reload',
        	handler:refresh
        }],
        onDblClickRow :openItem
	});
	
	itemsListJs.init = function(){
		
		refresh();
	}
	
	itemsListJs.loadItemData = function(result){
    	var res = result.result;
        if(res == "SUCCESS")
        {
        	var payload = jQuery.parseJSON(result.payload.value);
        	$('#list').datagrid('loadData',payload);
        }else if(res == "COMPONENT_ERROR")
        {
        	$.messager.alert("Error",result.payload.value);
        }else
        {
        	$.messager.alert("Error",result.result);
        }
	};
	itemsListJs.viewItem = function(result){
    	var res = result.result;
        if(res == "SUCCESS")
        {
        	var row = jQuery.parseJSON(result.payload.value);
    		
    		$('#view_name').html(row.name);
    		$('#view_price').html(row.priceValue);
    		$('#view_addUser').html(row.addUser);
    		$('#view_editUser').html(row.lastEditUser);
    		$('#view_desc').html(row.description);
    		
    		var categories = [];
    		var serie = {};
    		serie.name = row.name;
    		serie.data = [];
    		var series = [];
    		var price = row.priceList;
    		$(price).each(function(index){
    			categories[index] = price[index].time;
    			serie.data[index] = price[index].price;
    		});
    		series[0] = serie;
    		
    		fillChart(categories,series);
    		
        }else if(res == "COMPONENT_ERROR")
        {
        	$.messager.alert("Error",result.payload.value);
        }else
        {
        	$.messager.alert("Error",result.result);
        }
	}

	function openItem(){
        var row = $('#list').datagrid('getSelected');
        if (row){
        	workbenchJs.loadData("dispatch/manage/item/query?id="+row.id,itemsListJs.viewItem,"查询整形项目");
        	$('#itemView').dialog('open').dialog('setTitle','项目详细信息');
        }else
        	{
        		$.messager.alert("Error","请选择一条记录");
        	}

	}
	
    var url;
    function newItem(){
        $('#dlg').dialog('open').dialog('setTitle','添加项目');
        $('#fm').form('clear');
        url = 'dispatch/manage/item/add';
    }
    function refresh(){
    	workbenchJs.loadData("dispatch/manage/item/all",itemsListJs.loadItemData,"查询整形项目");
    }
    function edit(){
        var row = $('#list').datagrid('getSelected');
        if (row){
            $('#dlg').dialog('open').dialog('setTitle','编辑项目');
            $('#fm').form('clear');
            $('#fm').form('load',row);
            url = 'dispatch/manage/item/update?id='+row.id;
        }else
        {
        	$.messager.alert("Error",'请先选择一条记录');
        }
    }
    itemsListJs.save = function(){
    	
    	var json = {};
    	json.id = parseInt($("input[name='id']").val());
    	json.name = $("input[name='name']").val();
    	json.priceValue = parseFloat($("input[name='priceValue']").val());
    	json.description = $("textarea[name='description']").val();
		
    	var str = $.toJSON(json);
    	str = 'parameters='+str;
    	
    	if($('#fm').form('validate'))
    	{
    		$.ajax({
                type: "post",
                url: url,
                dataType:"json",
                data: str,
                cache: false,
                success: function (result) {
                	var res = result.result;
                    if(res == "SUCCESS")
                    {
                    	$('#dlg').dialog('close');
                    	refresh();
                    }else if(res == "COMPONENT_ERROR")
                    {
                    	$.messager.alert("Error",result.payload.value);
                    }else
                    {
                    	$.messager.alert("Error",result.result);
                    }
                    
                }
                
            });
    	}
    }
    function destroy(){
        var row = $('#list').datagrid('getSelected');
        if (row){
            $.messager.confirm('Confirm','删除项目同时会删除与项目相关的数据，确定？?',function(r){
                if (r){
                	workbenchJs.loadData("dispatch/manage/item/delete?id="+row.id,itemsListJs.deleteItemResult,"删除整形项目");
                }
            });
        }else
        	{
        		$.messager.alert("Error",'请先选择一条记录');
        	}
    }

    itemsListJs.deleteItemResult = function(result){
    	var res = result.result;
        if(res == "SUCCESS")
        {
        	refresh();
        }else if(res == "COMPONENT_ERROR")
        {
        	$.messager.alert("Error",result.payload.value);
        }else
        {
        	$.messager.alert("Error",result.result);
        }
        refresh();
    };
    	
    function fillChart(categories,series) {
    	
        $('#container').highcharts({
            title: {
                text: '项目价格变化表',
                x: -20 //center
            },
            subtitle: {
                text: 'OA',
                x: -20
            },
            xAxis: {
                categories: categories
            },
            yAxis: {
                title: {
                    text: '价格(人民币)'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                valueSuffix: '元'
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: series
        });
    }
}( window.itemsListJs = window.itemsListJs || {}, jQuery ));

$(function(){
	itemsListJs.init();
});
    </script>
    <style type="text/css">
        #fm{
            margin:0;
            padding:10px 30px;
        }
        .ftitle{
            font-size:14px;
            font-weight:bold;
            padding:5px 0;
            margin-bottom:10px;
            border-bottom:1px solid #ccc;
        }
        .fitem{
            margin-bottom:5px;
        }
        .fitem label{
            display:inline-block;
            width:80px;
            float:left;
        }
        .view{
        	margin-bottom:5px;
        	margin-left:9px;
        	display:inline-block;
            width:200px;
        }
    </style>